<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>理财直播课</title>
  <!-- 公共资源 -->
  <script src="./js/jquery.min.js"></script>
  <script src="./js/rem.js"></script>
  <link rel="stylesheet" href="./css/common.css">
  <!-- 公共资源结束 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="app">
    <div class="contentTop">
      <div class="title">理财直播课</div>
      <div class="stageInfo">
        <div class="stage">235期-A</div>
        <div class="time">上课时间：7月3日-7月8日</div>
      </div>
      <div class="teacherUserInfo-content">
        <div class="teacherUser">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" srcset="">
          <div class="teacherInfo">
            <div class="name">主讲老师</div>
            <div class="label">法怡</div>
          </div>
        </div>
        <div class="button" onclick="WeChatGroup()"><i class="icon-weixin"></i>加班级微信群</div>
      </div>
    </div>
    <div class="tab-wrap">
      <div class="nav">
        <ul>
          <li class="current">课前读物</li>
          <li>直播课程</li>
          <li>课后作业</li>
          <li>听课排名</li>
        </ul>
      </div>
      <div class="list beforeClass">
        <ul>
          <li>
            <a href="">
              <div class="name">1.1 经典理财书《富爸爸穷爸爸》经典理财书《富爸爸穷爸爸》经典理财书《富爸爸穷爸爸》经典理财书《富爸爸穷爸爸》</div>
              <div class="button">去学习</div>
            </a>
          </li>
          <li>
            <a href="">
              <div class="name">1.1 经典理财书《富爸爸穷爸爸》</div>
              <div class="button">去学习</div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list liveBroadcast">
        <ul>
          <li>
            <a href="">
              <div class="content">
                <div class="name">01 把钱放在正确位置把钱放在正确位置把钱放在正确位置</div>
                <div class="label">讲师：岐颜</div>
                <div class="time">直播时间：07月03日 19:00 <span class="playback">直播回放<i class="icon-gengduo"></i></span></div>
              </div>
              <div class="button"><i class="icon-weixin"></i>直播回放</div>
            </a>
          </li>
          <li>
            <a href="">
              <div class="content">
                <div class="name">01 把钱放在正确位置</div>
                <div class="label">讲师：岐颜</div>
                <div class="time">直播时间：07月03日 19:00</div>
              </div>
              <div class="button"><i class="icon-weixin"></i>直播回放</div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list afterClass">
        <ul>
          <li>
            <a href="">
              <div class="content">
                <div class="name">01 把钱放在正确位置把钱放在正确位置把钱放在正确位置把钱放在正确位置</div>
                <div class="label">共5题</div>
              </div>
              <div class="button">写作业</div>
            </a>
            <img src="./images/banner.png" alt="" srcset="">
          </li>
          <li>
            <a href="">
              <div class="content">
                <div class="name">01 把钱放在正确位置</div>
                <div class="label">共5题</div>
              </div>
              <div class="button">写作业</div>
            </a>
          </li>
        </ul>
      </div>
      <div class="list ranking show">
        <div class="user-info">
          <div class="row">
            <div class="col user">
              <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" srcset="">
              <div class="user-name">张兆亿</div>
            </div>
            <div class="col">
              <div class="label">我的排名</div>
              <div class="data">3400</div>
            </div>
            <div class="col">
              <div class="label">我的听课时长</div>
              <div class="data">0秒</div>
            </div>
          </div>
        </div>
        <ul>
          <li class="top">
            <div class="overallRanking">总排名</div>
            <div class="duration-txt">听课时长</div>
          </li>
          <li>
            <div class="content">
              <span class="indexOf">01</span>
              <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" srcset="">
              <span class="name">龚飞宏</span>
            </div>
            <div class="duration">13时20分</div>
          </li>
          <li>
            <div class="content">
              <span class="indexOf">01</span>
              <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" srcset="">
              <span class="name">龚飞宏</span>
            </div>
            <div class="duration">13时20分</div>
          </li>
          <li>
            <div class="content">
              <span class="indexOf">01</span>
              <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" srcset="">
              <span class="name">龚飞宏</span>
            </div>
            <div class="duration">13时20分</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <div class="WeChatGroup-wrap">
      <div class="greyBg"></div>
      <div class="contentGroup">
        <img src="./images/img1.png" class="book" alt="">
        <i class="icon-close" onclick="WeChatGroup()"></i>
        <div class="describe">快去班级微信群 免费学习吧</div>
        <div class="label">长按二维码入群</div>
        <img class="qrcode-images" src="https://qr.api.cli.im/newqr/create?data=1&level=H&transparent=false&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&logoshape=no&size=260&kid=cliim&key=2ebf180a9341d3de2aa8d6008e518ae8" alt="">
        <div class="phone">131****3231 <a href="">正在去领</a></div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  // tab切换
  $('.tab-wrap .nav ul li').click(function(){
    let that = $(this)
    let i = that.index();
    that.addClass('current').siblings().removeClass('current');
    $('.tab-wrap .list').eq(i).show().siblings('.list').hide();
  })
  //二维码
  function WeChatGroup(taht) {
    var WeChatGroup = $(".WeChatGroup-wrap")
    if (WeChatGroup.css("display") == "none") {
      WeChatGroup.show();
    } else {
      WeChatGroup.hide();
    }
  }
</script>

</html>